<template>
  <NavBar title="名医在线" logo="../assets/imgs/logo-myzx-text.png"></NavBar>
  <div class="home">
    <!-- <h1>首页</h1> -->
    <van-search placeholder="请输入搜索关键词"></van-search>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in bannerList" :key="item.id">
        <img v-lazy="baseUrl + item.img" style="height:200px;width: 100%;" alt="">
      </van-swipe-item>
    </van-swipe>
    <van-divider>
      <h3>名医在线</h3>
    </van-divider>
    <van-card :title="item.name" v-for="item in doctorList" :key="item.id">
      <template #thumb>
        <img style="width: 80px;height: 80px;" v-lazy="baseUrl + item.avatar" alt="">
      </template>
      <template #tags>
        <p>
          职称:
          <van-tag plain round type="primary">{{ item.title }}</van-tag>
        </p>
        <p>擅长领域:
          <van-space>
            <van-tag type="primary" plain v-for="(v, i) in item.tags" :key="i">{{ v }}</van-tag>
          </van-space>
          <span v-if="!item.tags">暂无数据</span>
        </p>
        <p>所属机构:
          {{ item.bus_title }}
        </p>
        <p>毕业院校:
          {{ item.school }}
        </p>
      </template>
      <template #footer>
        <van-button v-if="role_id !== 1" round size="mini" type="primary"
          :to="{ name: 'appoint', query: { doctorid: item.id } }">
          立即预约
        </van-button>
        <van-button round size="mini" type="primary" :to="{ name: 'personHome', query: { id: item.id } }" plain>
          医师主页
        </van-button>
        <van-button round size="mini" type="primary" :to="{ name: 'businessHome', query: { id: item.bus_id } }" plain>
          医疗机构主页
        </van-button>
      </template>
    </van-card>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { getDoctorlist, getBannerlist } from '@/utils/api';
import { DoctorType, BannerType } from '@/types';
// 医生列表
const doctorList = ref<DoctorType[]>([]);
const bannerList = ref<BannerType[]>([]);
onMounted(async () => {
  const { data: { data } } = await getDoctorlist();
  doctorList.value = data;
  const { data: { data: imgs } } = await getBannerlist(0);
  bannerList.value = imgs;
});
const { role_id } = JSON.parse(localStorage.getItem('userLoginInfo') || '{}');
</script>
<style></style>
